<template>
	<view class="QilinNav" :style="{height:navHeight + 'px'}">
		<view class="QilinNav-bar flex-row" :style="getStyle"
			:class="[propsValue.bgColor]"
		>
			<view class="QilinNav-bar-left" @click="prevBack()">
				<uv-icon name="arrow-left" size="18" bold  
					:color="propsValue.bgColor ? '#fff' : ''"></uv-icon>
			</view>
			<view class="QilinNav-bar-title">
				<slot name="title"></slot>
			</view>
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script setup>
import store from "@/store/index.js";
const {navHeight,statusHeight} = store.getters.getNavObjInfo;
// console.log(navHeight,statusHeight);
import {computed} from "vue";


/*
    响应式选项区域
*/
const propsValue = defineProps({
	bgColor:{
		type:String,
		default:""
	},
	bgLinear:{
		type:String,
		default:""
	}
});


/*
    数据变量定义区域
*/
// 点击返回图标事件监听
const prevBack=()=>{
	uni.navigateBack({
		delta:1
	});
};


/*
    计算属性等代码区域
*/
const getStyle = computed(()=>{
	let style = `height:${navHeight}px;padding-top:${statusHeight}px;`;
	if(propsValue.bgLinear){
		style = `${style}background-image:url(${propsValue.bgLinear});`;
	};
	return style;
});


/*
    逻辑脚本代码区域
*/


/*
    生命周期等代码区域
*/


</script>

<style lang="scss" scoped>
.QilinNav{
	position:fixed;
	width:100%;
	top:0;
	left:0;
	z-index:999;
	>.QilinNav-bar{
		width:100%;
		align-items:center;
		justify-content:space-between;
		padding:0 18upx;
		box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
		background-color:#fff;
		>.QilinNav-bar-left{
			
		}
		>.QilinNav-bar-title{
			position:absolute;
			text-align:center;
			font-size:32upx;
			// line-height:60upx;
			left:50%;
			right:0;
			transform:translateX(-50%);
		}
	}
}
</style>
